<template>
  <div class="system-customer">
    <xr-header/>

    <div class="customer-content">
      <div class="system-view-nav">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>

      </div>

      <div class="system-view-content" >
        <div class="option-bar">
          <el-row type="flex" justify="start" class="left-pad">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width='80px' inline size='mini'>
              <el-form-item label="流程名称">
                <el-input v-model="queryForm.name" clearable></el-input>
              </el-form-item>
              <el-form-item label="流程别名">
                <el-input v-model="queryForm.modelKey" clearable></el-input>
              </el-form-item>
              <el-form-item label='状态' prop='status'>
                <el-select v-model='queryForm.status' clearable>
                  <el-option v-for="item in statusList" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row style="margin-bottom: 10px" type="flex" justify="start">
            <el-button size="mini" type="primary" @click="openModelDialog" style="margin-top: 10px">
              <Icon type="ios-add"/>
              添加
            </el-button>
          </el-row>
        </div>
        <el-row class="margin:30px;">
          <el-col>
            <el-table
              :data="tableModelData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
            >
              <el-table-column
                label="序号"
                fixed
                type="index"
                width="50"
                fixed
                align="center">
                <template slot-scope="scope">
                  <span>{{(queryForm.pageNum-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                width='180'
              >
              </el-table-column>
              <el-table-column
                prop="modelKey"
                label="流程别名"
              >
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.defId==null || scope.row.defId==''" type="danger" class="tag">草稿</el-tag>
                  <el-tag v-else type="success" class="tag">发布</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="version"
                label="版本号"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                fixed="right"
              >
                <template slot-scope="scope">

                  <el-button type="text" size="small" @click="locationUrl(scope.row.id)">编辑</el-button>
                  <!--                      <el-button type="text" @click="viewImage(scope.row.id)" size="small">查看BPM流程</el-button>-->
                  <el-button type="text" @click="publishModel(scope.row.id)" size="small">发布</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="p-contianer">
          <el-pagination
            background
            class="p-bar"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="totalModel">
          </el-pagination>
        </div>



      </div>

    </div>

    <Modal v-model="modelerModal" fullscreen title="杰狮V4设计器" @on-cancel="cancelModel"
           :mask-closable="false" :transfer="false" :closable="false">
      <div slot="header" style="height: 350px;min-height: 350px">
        <div class="create-approval">
          <div class="create-approval-header">
            <div class="create-approval-header-left"><a @click="cancelModel">
              <i aria-label="图标: left"
                 class="anticon anticon-left create-approval-header-back-btn">
              </i></a></div>
            <div class="create-approval-header-tab-list">
              <div
                v-bind:class="{ 'create-approval-header-tab-item': true, 'create-approval-header-tab-item-active': current==0 }"
                @click="tableChange(0)"><span
                class="create-approval-header-tab-counter">1</span><span>基础信息</span></div>
              <div classObject=""
                   v-bind:class="{ 'create-approval-header-tab-item': true, 'create-approval-header-tab-item-active': current==1 }"
                   @click="tableChange(1)"><span
                class="create-approval-header-tab-counter">2</span><span>表单设计</span></div>
              <div
                v-bind:class="{ 'create-approval-header-tab-item': true, 'create-approval-header-tab-item-active': current==2 }"
                @click="tableChange(2)"><span
                class="create-approval-header-tab-counter">3</span><span>流程设计</span></div>
              <div
                v-bind:class="{ 'create-approval-header-tab-item': true, 'create-approval-header-tab-item-active': current==3 }"
                @click="tableChange(3)"><span
                class="create-approval-header-tab-counter">4</span><span>更多设置</span></div>
            </div>
            <div class="create-approval-header-right">
              <div class="create-approval-header-error-list-wrapper">
                <div class="validate-error-list-trigger">
                  <!--                  <div class="validate-error-list-tip">2条内容不完善</div>-->
                  <div class="validate-error-list-tip">{{errorMsg}}</div>
                </div>
              </div>
              <!--              <button type="button" class="ant-btn create-approval-header-preview-btn ant-btn-default"><span>预览 </span>-->
              <!--              </button>-->
              <button type="button" class="ant-btn create-approval-header-release-btn ant-btn-primary" @click="publish">
                <span>发布 </span>
              </button>
            </div>
          </div>
          <div class="create-approval-main">
          </div>
        </div>
      </div>


      <div v-show="current==0" style="margin-top: 20px">
        <Card dis-hover class="task-card">
          <div>
            <Form :model="uploadForm" :label-width="80" :rules="uploadFormRuleValidate" ref="uploadForm">
              <FormItem label="名称" prop="name">
                <Input v-model="uploadForm.name"></Input>
              </FormItem>
              <FormItem label="别名" prop="modelKey">
                <Input v-model="uploadForm.modelKey"></Input>
              </FormItem>
              <FormItem prop="groupName" label="分类">
                <treeselect v-model="uploadForm.groupName"
                            :normalizer="normalizer"
                            :multiple="false"
                            @select="selectTree"
                            @input="clearOnSelect"

                            placeholder="请选择"
                            :options="categoryData"/>

              </FormItem>
              <FormItem label="描述" prop="description">
                <Input v-model="uploadForm.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
              </FormItem>

            </Form>


          </div>

        </Card>

      </div>
      <div v-show="current==1" style="margin-top: 20px">

        <container ref="container" v-on:widgetFormChanged="widgetFormChanged"></container>
      </div>
      <div v-if="current==2" style="margin-top: 20px">
        <div class="app-container bpm-btn">
          <Card dis-hover class="task-card">
            <div>
              <div class="fd-nav-content">
                <section class="dingflow-design">
                  <div class="zoom" style="display: none">
                    <div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)"></div>
                    <span>{{nowVal}}%</span>
                    <div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)"></div>
                  </div>
                  <div class="box-scale" id="box-scale"
                       :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'">
                    <nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"
                              :isTried.sync="isTried" :directorMaxLevel="directorMaxLevel"
                              :node="node_"
                              :tableId="tableId" ></nodeWrap>
                    <div class="end-node">
                      <div class="end-node-circle"></div>
                      <div class="end-node-text">流程结束</div>
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </Card>
        </div>

      </div>
      <div v-if="current==3" style="margin-top: 20px">
        <div class="other-settings-panel">
          <div class="other-settings-setting-item"><p class="revoke-setting-main-text">标准设置</p>
            <div>
              <div class="revoke-setting-label-wrapper">
                <el-checkbox v-model="otherForm.standard">是否兼容BPM2.0标准</el-checkbox>

              </div>
            </div>
            <p class="revoke-setting-sub-text">勾选后，设计器建模会自动生成BPM文件</p></div>
          <div class="other-settings-setting-item"><p class="share-setting-main-text">转发设置</p>
            <div
              class="share-setting-label-wrapper share-setting-checkbox ant-checkbox-wrapper ant-checkbox-wrapper-checked">
              <el-checkbox v-model="otherForm.forward">仅可转发给审批相关人员</el-checkbox>

            </div>
            <p class="share-setting-sub-text">勾选后，审批单仅可被转发给申请人、审批人、抄送人，不能被转发给其他人</p></div>
          <div class="other-settings-setting-item"><p class="share-setting-main-text">归档设置</p>
            <div
              class="share-setting-label-wrapper share-setting-checkbox ant-checkbox-wrapper ant-checkbox-wrapper-checked">
              <el-checkbox v-model="otherForm.archive">开启自动归档</el-checkbox>

            </div>
            <p class="share-setting-sub-text">勾选后，实例结束后自动进行归档</p></div>
          <div class="other-settings-setting-item"><p class="share-setting-main-text">数据同步到大数据平台设置</p>
            <div
              class="share-setting-label-wrapper share-setting-checkbox ant-checkbox-wrapper ant-checkbox-wrapper-checked">
              <el-checkbox v-model="otherForm.es">开启数据自动同步功能</el-checkbox>

            </div>
            <p class="share-setting-sub-text">勾选后，任务完成之后，数据直接同步到大数据平台</p>
          </div>
        </div>

      </div>
      <div slot="footer"></div>
      <Modal :mask-closable="false" :transfer="true" :closable="false" title="提示" v-model="tipVisible">
        <div class="ant-confirm-body">
          <i class="anticon anticon-close-circle" style="color: #f00;"></i>
          <span class="ant-confirm-title">当前无法发布</span>
          <div class="ant-confirm-content">
            <div>
              <p class="error-modal-desc">以下内容不完善，需进行修改</p>
              <div class="error-modal-list">
                <div class="error-modal-item" v-for="(item,index) in tipList" :key="index">
                  <div class="error-modal-item-label">{{item.info}}</div>
                  <div class="error-modal-item-content">{{item.name}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
				<el-button @click="tipVisible = false">我知道了</el-button>
				<el-button type="primary" @click="tipVisible = false">前往修改</el-button>
			</span>
      </Modal>

    </Modal>

    <Modal :mask-closable="false" v-model="viewImageModeler" fullscreen title="流程图" :transfer="false">
      <iframe width="100%" height='100%' frameborder='0' align='center' allowfullscreen='true' allow="autoplay"
              id='iframe2' :src="viewImageModelerTmpSrc"></iframe>
      <div slot="footer"></div>
    </Modal>
  </div>


</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  .option-bar {
    padding: 15px 20px;
  }
  .system-customer {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  .customer-content {
    flex: 1;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .system-view-nav {
    min-width: 200px;
    background: #fff;
    margin-right: 10px;
    padding-top: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;

  }
  .system-view-content {
    flex: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
  }

  // 菜单
  .menu-item {
    color: #333;
    font-size: 13px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    .icon-close {
      position: absolute;
      top: 0;
      right: 8px;
      z-index: 1;
      display: none;
    }
  }

  .menu-item:hover,
  .menu-item.is-select {
    background-color:  #F6F8FA;
  }

  .menu-item:hover::before,
  .menu-item.is-select::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: #5383ed;
  }
</style>

<script>
  import {getBpmnModelCategory} from "@/api/analy";
  import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
  require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import Container from '@/components/mobile/Container.vue'
  import {getFormModelTableListJson} from '@/api/form'
  import {addModel, getModel, listModel, publishModel, transformationModel} from "@/api/biz/model";
  import XrHeader from '@/components/XrHeader'

  export default {
    name: 'Task',
    components: {
      Treeselect, Container,XrHeader
    },

    data() {

      var checkKey = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('别名不能为空'));
        }
        var PLACEHOLDER_REGEX = /\$\{([^}]*)\}/g;
        var SPACE_REGEX = /\s/;
        value = value.replace(PLACEHOLDER_REGEX, '$1');
        if (SPACE_REGEX.test(value)) {
          return callback(new Error('Key不能包含空格'));

        }
        var ID_REGEX = /^[a-z_][\w-.]*$/i;
        var QNAME_REGEX = /^([a-z][\w-.]*:)?[a-z_][\w-.]*$/i;

        if (!ID_REGEX.test(value)) {
          if (QNAME_REGEX.test(value)) {
            return callback(new Error('别名不能包含前缀.'));
          }
          return callback(new Error('别名必须是一个有效的QName'));
        }
        return callback();
      };
      return {
        node_:[],
        modelerSrc: 'http://127.0.0.1:8081/fastflow-admin/form/design/mobile/editor?messageId=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ7XCJhY2NvdW50XCI6XCJhZG1pblwiLFwiZnVsbG5hbWVcIjpcIueuoeeQhuWRmDJcIixcImlkXCI6XCJzdXBlclwiLFwidGVuYW50SWRcIjpcIlwiLFwidXNlck5vXCI6XCJzdXBlclwifSIsImV4cCI6MTYxNTYwNzUyNn0.wnZPtWcuKJXK42oelbWfaczGyDSqzCoEnwZBnm7fpyFQ3eHa9gvknXIhKRliQEOL0vHJoZreSxToU3BG-zEhXQ',
        errorMsg: '',
        activeName: 'inner',
        isTried: false,
        tipList: [],
        tipVisible: false,
        nowVal: 100,
        processConfig: {},
        nodeConfig: {},
        workFlowDef: {},
        flowPermission: [],
        directorMaxLevel: 0,
        dialogVisible: true,
        tableId: "",
        current: 0,
        uploadFormRuleValidate: {
          name: [
            {required: true, message: '名称为空，请填写', trigger: 'blur'}
          ],
          groupName: [
            {required: true, message: ' ', trigger: 'blur'}
          ],
          modelKey: [
            {required: true, message: '别名为空，请填写', trigger: 'blur'},
            {validator: checkKey, trigger: 'blur'}
          ]
        },
        baseUploadURL: process.env.VUE_APP_BASE_BPM_API + "/a1bpmn/api/upload/model",
        otherForm: {
          standard: false,
          forward: false,
          archive: false,
          es: false,
        },
        uploadForm: {
          name: "",
          modelKey: '',
          formKey: '',
          id: "",
          description: '',
          typeId: null,
          groupName: null,
        },
        suspendProcessDefinitionForm: {
          suspendProcess: false
        },
        activateProcessDefinitionForm: {
          activateProcess: false
        },
        tableData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        totalModel: 0,
        tableModelData: [],
        chartVisible: false,
        code: false,
        varHtml: "",
        modelerModal: false,
        uploadModal: false,
        suspendProcessDefinitionModal: false,
        activateProcessDefinitionModal: false,
        suspendProcessDefinitionKey: '',
        activateProcessDefinitionKey: '',
        viewImageModeler: false,
        chartData: {},
        baseURL: process.env.VUE_APP_BASE_BPM_API,
        viewImageModelerSrc: process.env.VUE_APP_BASE_BPM_API + "view/def.html?&modelId=",
        viewImageModelerTmpSrc: "",
        shopName: [],
        statusList: [
          {label: "草稿", value: "0"},
          {label: "发布", value: "1"},
        ],
        queryFormForm: {
          groupId: '',
          formType: '',
          formKey: '',
          name: '',
          status: '',
          page: 1,
          pageSize: 10,
          limit: 10
        },
        queryForm: {
          name: "",
          modelKey: "",
          createTime: "",
          pageNum: 1,
          limit: 10,
          pageSize: 10,
          status: '',
          whereSql: "",
          typeKey: ""
        },
        categoryData: [],
        uploadList: [],
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      widgetFormChanged(val){
        this.node_=val;
      },
      viewImage: function (id) {
        if (id) {
          var url = this.baseURL + "view/def.html?&modelId=" + "V4." + id + "&t=" + new Date().getTime();
          this.viewImageModelerTmpSrc = url;

        }
        this.viewImageModeler = true;

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      transformation(id) {
        transformationModel(id).then(response => {
          if (response.code == 0) {
            alert(response.data)
          }
        });


      },
      publishModel(id) {

        publishModel(id).then(response => {
          if (response.code == 0) {
            this.msgNotifySuccess("发布成功");
            this.getData()

          }
        });
      },
      locationUrl(id) {
        this.current = 0
        this.queryFormForm.page = 1
        this.resetForm('uploadForm');

        getModel(id).then(response => {
          this.$refs.container.handleWidgetFormClear();
          if (response.code == 0) {
            this.modelerModal = true;
            if (response.data) {
              var data = response.data;
              this.uploadForm.name = data.name;
              this.uploadForm.groupName = data.groupName;
              this.uploadForm.modelKey = data.modelKey;
              this.uploadForm.id = data.id;
              this.uploadForm.description = data.description;
              this.uploadForm.typeId = data.typeId;
              if (data.otherSettingStr) {
                var otherSettingStr = JSON.parse(data.otherSettingStr);
                this.otherForm.standard = otherSettingStr.standard
                this.otherForm.forward = otherSettingStr.forward
                this.otherForm.archive = otherSettingStr.archive
                this.otherForm.es = otherSettingStr.es
              }
              if (data.thumbnailJsonStr) {
                var thumbnailJsonStr = JSON.parse(data.thumbnailJsonStr);
                this.processConfig = thumbnailJsonStr;
                this.nodeConfig = this.processConfig.nodeConfig;
                this.flowPermission = this.processConfig.flowPermission;
                this.directorMaxLevel = this.processConfig.directorMaxLevel;
                this.workFlowDef = this.processConfig.workFlowDef
                this.tableId = this.processConfig.tableId
              }
              if (data.formJsonStr) {
                var formJsonStr = JSON.parse(data.formJsonStr);
                var form_json = this.$refs.container.handleFixedJson(data.formJsonStr);
              }

            }
          }

        });
      },
      publish() {
        this.tipVisible = false
        var form_json = this.$refs.container.handleGenerateJson();

        this.$refs['uploadForm'].validate((valid, data) => {
          var tipList = []
          if (valid) {
            this.tipList = [];


          } else {
            tipList.push({name: '基础信息校验不通过', type: '', 'info': '基础信息'})
            this.tipList = tipList;
          }
          if (this.tipList.length > 0) {
            this.tipVisible = true
          } else {
            var obj = JSON.parse(JSON.stringify(this.uploadForm))
            var workFlowJson = JSON.stringify(this.processConfig)
            var formJson = JSON.stringify(form_json)
            obj['thumbnailJsonStr'] = workFlowJson
            obj['otherSettingStr'] = JSON.stringify(this.otherForm)
            obj['formJsonStr'] = formJson
            addModel(obj).then(response => {
              if (response.code == 0) {

                if (this.uploadForm.id) {
                  this.msgNotifySuccess("更新成功");

                } else {
                  this.msgNotifySuccess("新增成功");
                  var data = response.data
                  this.uploadForm.id = data
                }
                this.open = false;
              } else {
                this.msgNotifyError(response.msg)
              }

            });
          }

        })
      },
      tableChange(index) {
        if (index == 1) {
          this.getFormData();
        }
        this.current = index
      },
      classObject(index) {
        return {
          active: this.isActive,
        }
      },
      rowClick(row) {
        this.uploadForm.formKey = row.formKey;
      },
      on_click(e) {
      },
      toReturn() {
        //window.location.href = ""
      },
      reErr(data) {
        if (data.childNode) {
          if (data.childNode.type == 1) {//审批人
            if (data.childNode.error) {
              this.tipList.push({name: data.childNode.nodeName, type: "审核人"})
            }
            this.reErr(data.childNode)
          } else if (data.childNode.type == 2) {
            if (data.childNode.error) {
              this.tipList.push({name: data.childNode.nodeName, type: "抄送人"})
            }
            this.reErr(data.childNode)
          } else if (data.childNode.type == 3) {
            this.reErr(data.childNode.childNode)
          } else if (data.childNode.type == 4) {
            this.reErr(data.childNode)
            for (var i = 0; i < data.childNode.conditionNodes.length; i++) {
              if (data.childNode.conditionNodes[i].error) {
                this.tipList.push({name: data.childNode.conditionNodes[i].nodeName, type: "条件"})
              }
              this.reErr(data.childNode.conditionNodes[i])
            }
          }
        } else {
          data.childNode = null
        }
      },
      saveSet() {
        this.isTried = true;
        this.tipList = [];
        this.processConfig.flowPermission = this.flowPermission
        console.log(JSON.stringify(this.processConfig))
      },
      zoomSize(type) {
        if (type == 1) {
          if (this.nowVal == 50) {
            return;
          }
          this.nowVal -= 10;
        } else {
          if (this.nowVal == 300) {
            return;
          }
          this.nowVal += 10;
        }
      },
      to(index) {
        if (index == 1) {
          this.getFormData();
        }

        this.current = index

      },
      getFormData: function () {
        getFormModelTableListJson(this.queryFormForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count)
        })
      },
      recursionWindow: function () {
      },
      handleResetForm: function () {
        this.uploadForm.name = "";
        this.uploadForm.modelKey = "";
        this.uploadForm.id = "";
        this.uploadForm.description = "";
        this.uploadForm.typeId = null;
        this.uploadForm.groupName = null;
        this.uploadForm.formKey = null;
        this.uploadList = []
        this.uploadModal = false
      },
      handleupLoadSuccess(res, file) {
        file.url = res.data;
        this.uploadForm.id = res.id
        this.uploadList = [];
        this.uploadList.push(file);
        this.uploadForm.photo = file.url
      },

      //后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.title,
          label: node.title,
          children: node.children
        }
      },
      selectTree: function (node, instanceId) {
        this.uploadForm.typeId = node.id
        this.uploadForm.groupName = node.title
      },

      clearOnSelect: function (node, instanceId) {
        if (!node) {
          this.uploadForm.typeId = null
          this.uploadForm.groupName = null
        }
      },
      cancelModel: function () {
        this.modelerModal = false;
        this.handleResetForm();
        this.getModelerJsonAction();
      },

      /**
       * 获取人员
       * @param key
       */
      getUser: function (id) {
        if (id) {
          this.$router.push({name: 'preUser', query: {t: new Date().getTime(), id: id}})

        }
      },
      openModelDialog: function () {
        this.current = 0
        this.queryFormForm.page = 1
        var jsonStr = '{\n' +
          '  "code": "200",\n' +
          '  "msg": "success",\n' +
          '  "data": {\n' +
          '    "tableId": 1,\n' +
          '    "workFlowVersionId": "",\n' +
          '    "workFlowDef": {\n' +
          '      "name": "合同审批2",\n' +
          '      "publicFlag": 1,\n' +
          '      "sortNo": 5,\n' +
          '      "duplicateRemovelFlag": 1,\n' +
          '      "optionTip": "",\n' +
          '      "optionNotNull": 0,\n' +
          '      "status": 1\n' +
          '    },\n' +
          '    "directorMaxLevel": 4,\n' +
          '    "flowPermission": [],\n' +
          '    "nodeConfig": {\n' +
          '      "pkId": "sid-start-node",\n' +
          '      "id": "sid-start-node",\n' +
          '      "nodeName": "发起人",\n' +
          '      "type": 0,\n' +
          '      "priorityLevel": "",\n' +
          '      "settype": "",\n' +
          '      "selectMode": "",\n' +
          '      "selectRange": "",\n' +
          '      "examineRoleId": "",\n' +
          '      "directorLevel": "",\n' +
          '      "replaceByUp": "",\n' +
          '      "examineMode": "",\n' +
          '      "noHanderAction": "",\n' +
          '      "examineEndType": "",\n' +
          '      "examineEndRoleId": "",\n' +
          '      "examineEndDirectorLevel": "",\n' +
          '      "ccSelfSelectFlag": "",\n' +
          '      "conditionList": [],\n' +
          '      "nodeUserList": [],\n' +
          '      "childNode": {\n' +
          '        "nodeName": "审核人",\n' +
          '        "id": "sid-user-task-node1",\n' +
          '        "error": false,\n' +
          '        "type": 1,\n' +
          '        "settype": 2,\n' +
          '        "selectMode": 0,\n' +
          '        "selectRange": 0,\n' +
          '        "directorLevel": 1,\n' +
          '        "replaceByUp": 0,\n' +
          '        "examineMode": 1,\n' +
          '        "noHanderAction": 2,\n' +
          '        "examineEndDirectorLevel": 0,\n' +
          '      "operateNullUserStrategy": "1",\n' +
          '      "operateNullUser": "1",\n' +
          '      "ruleType": "1",\n' +
          '      "operateType": "1",\n' +
          '        "nodeUserList": [],\n' +
          '        "formFields": [],\n' +
          '        "btnList": [],\n' +
          '        "nullNodeUserList": []\n' +
          '      },\n' +
          '      "conditionNodes": []\n' +
          '    }\n' +
          '  }\n' +
          '}\n';
        var res = JSON.parse(jsonStr);
        this.processConfig = res.data;
        this.nodeConfig = this.processConfig.nodeConfig;
        this.flowPermission = this.processConfig.flowPermission;
        this.directorMaxLevel = this.processConfig.directorMaxLevel;
        this.workFlowDef = this.processConfig.workFlowDef
        this.tableId = this.processConfig.tableId
        this.$refs.container.handleWidgetFormClear();
        this.modelerModal = true;
      },
      openModelUploadDialog: function () {
        this.uploadModal = true;
      },
      queryFormCreateTime: function (e) {
        this.queryForm.createTime = e;
      },
      refreshTask: function (data) {
        if (data[0].parentId == '-1') {
          this.queryForm.typeKey = ""
        } else {
          this.queryForm.typeKey = data[0].id;

        }
        this.queryForm.page = 1
        this.getModelerJsonAction()
      },
      queryMethod: function () {
        this.getModelerJsonAction()

      },
      getModelerJsonAction: function () {
        listModel(this.queryForm).then((response) => {
          this.tableModelData = response.data
          this.totalModel = parseInt(response.count);

        })
      },
      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data
        })
        this.getModelerJsonAction();

      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.getModelerJsonAction()
      },
      handleFormCurrentChange(val) {
        this.queryFormForm.page = val
        this.getFormData();
      },
      search() {
        this.queryForm.pageNum = 1
        this.queryForm.type = 2
        this.queryForm.typeKey = ""
        this.queryMethod()
        this.queryForm.type = 5
      },
      reset() {
        this.queryForm.typeKey = ""
        this.queryForm.status = ""
        this.queryForm.type = 5
        this.queryForm.name = ""
        this.queryForm.modelKey = ""
        this.getData();
      }

    }

  }

</script>
<style scoped>
  @import "../../../css/workflow.css";


</style>
<style lang="scss" scoped>

  .node-wrap-box .title {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 30px;
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    text-align: left;
    background: #576a95;
    border-radius: 4px 4px 0 0
  }


  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    margin-left: 6px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .input_w {
    width: 40% !important;
  }

  .left-pad {
    margin-left: -11px;
  }

  .task-card {
    margin-top: 10px;
  }

  .CodeMirror {
    /* Set height, width, borders, and global font properties here */
    font-family: monospace;
    height: auto;
    color: black;
    direction: ltr;
  }

  .CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
  }

  .el-step__head:hover {
    color: #67c23a;
    border-color: #67c23a;
  }
</style>

